<!--
 * @Author: licongwei
 * @Date: 2022-03-15 15:17:47
 * @FileDescription: 基本情况
-->
<template>
  <com-box :title="pieState.title">
    <template v-slot>
      <div class="jbqk">
        <div class="top">
          <div class="label">
            <p class="text">{{ pieState.subTitle }}</p>
            <p class="number">
              <number-scroll
                :number="pieState.total"
                :color="'#ffa811'"
                :fontSize="26"
              ></number-scroll>
              <span class="unit-orange">个</span>
            </p>
          </div>
          <charts :params="pieState.params"></charts>
        </div>
        <div class="bottom">
          <div class="label">
            <div class="total-box">
              <p class="name">{{ pie3DState.subTitle }}</p>
              <p class="number">
                <number-scroll
                  style="position: relative; bottom: 1px"
                  :number="pie3DState.total"
                  :color="'#ffa811'"
                  :fontSize="24"
                ></number-scroll>
                <span class="unit-orange">次</span>
              </p>
            </div>
            <ul class="list">
              <li
                class="item"
                v-for="(item, index) of pie3DState.params.series[0].data"
                :key="index"
              >
                <p class="name">{{ item[0] }}</p>
                <p class="number">
                  <number-scroll
                    style="position: relative; bottom: 1px"
                    :number="item[1]"
                    :color="'#3bfc99'"
                    :fontSize="24"
                  ></number-scroll>
                  <span class="unit-cyan">次</span>
                </p>
              </li>
            </ul>
          </div>
          <div class="chart">
            <div ref="highchartContainer" style="height: 220px"></div>
          </div>
        </div>
      </div>
    </template>
  </com-box>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, watch, onBeforeUnmount } from 'vue'
import httpRequest from '@/service'
import comBox from '@/components/comBox/comBox.vue'
import numberScroll from '@/components/numberScroll/numberScroll.vue'
import * as Highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(Highcharts)
interface IState {
  chartsInstance?: Highcharts.Chart | null
  title: string
  subTitle: string
  total: number
  unit?: string
  params: any
  getData: (adcode: string) => void
}
export default defineComponent({
  name: 'jbqk',
  props: {
    adcode: {
      type: String,
      default: '650000'
    }
  },
  components: {
    comBox,
    numberScroll
  },
  setup(props, { emit }) {
    const colorList = [
      '#20f7ff',
      '#ff712b',
      '#febe09',
      '#b45af3',
      '#67ff9a',
      '#fff100',
      '#0091ff',
      '#ff5ff0'
    ]
    // 轮播饼图
    const pieState: IState = reactive({
      title: '',
      subTitle: '',
      total: 0,
      unit: '',
      params: {
        custom: true,
        loading: true,
        forceRedraw: true,
        height: '240px',
        options: {
          dataset: {
            dimensions: ['name', 'value'],
            source: []
          },
          tooltip: {
            show: false
          },
          xAxis: [
            {
              show: false
            }
          ],
          yAxis: [
            {
              show: false
            }
          ],
          legend: {
            orient: 'vertical',
            top: '2%',
            right: '5%',
            data: [],
            itemWidth: 14,
            itemHeight: 7,
            itemGap: 14,
            textStyle: {
              fontSize: '15px'
            },
            selectedMode: false
          },
          series: [
            {
              type: 'pie',
              radius: ['55%', '80%'],
              center: ['35%', '50%'],
              label: {
                show: false,
                position: 'center',
                lineHeight: 24,
                color: '#00ffea',
                fontSize: '18px',
                formatter: (params: any) => {
                  return `${params.name}\n${params.percent.toFixed(0)}%`
                }
              },
              itemStyle: {
                color: (params: any) => {
                  return colorList[params.dataIndex]
                }
              },
              emphasis: {
                label: {
                  show: true
                }
              }
            }
          ]
        },
        // 轮播配置
        carousel: {
          show: true,
          trigger: 'item',
          interval: 2000,
          direction: 0
        },
        event: {
          click: () => {
            emit('tableShow')
          }
        }
      },
      getData: (adcode: string) => {
        pieState.params.loading = true
        httpRequest
          .get({ url: 'M1JbqkJcpz', params: { adcode: adcode } })
          .then((res) => {
            pieState.title = res.title
            pieState.unit = res.unit
            pieState.subTitle = res.subTitle
            pieState.params.options.dataset.source = []
            pieState.total = res.total
            res.data.forEach((item: any, index: number) => {
              // pieState.total += item.value
              let obj = {
                name: item.name,
                value: item.value,
                textStyle: {
                  color: colorList[index]
                }
              }
              pieState.params.options.dataset.source.push(obj)
            })
            pieState.params.options.legend.data =
              pieState.params.options.dataset.source
            pieState.params.loading = false
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    pieState.getData(props.adcode)

    // 3D饼图
    const highchartContainer = ref()
    const pie3DState: IState = reactive({
      title: '',
      subTitle: '',
      chartsInstance: null,
      total: 0,
      params: {
        chart: {
          type: 'pie',
          backgroundColor: 'transparent',
          options3d: {
            enabled: true,
            alpha: 45
          }
        },
        title: {
          text: ''
        },
        tooltip: {
          backgroundColor: '#1959a7',
          borderColor: '#4beeff',
          borderWidth: 1,
          padding: 12,
          borderRadius: 4,
          useHTML: true,
          style: {
            color: '#fff'
          },
          headerFormat:
            '<div style="font-size:14px;margin-bottom:4.5px;">{point.key}</div>',
          pointFormat:
            '<span style="color:{point.color};font-size:19px;margin-right:3px;">\u25CF</span><span style="font-size:14px;">{series.name}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b style="font-size:14px;">{point.y}</b><br/>'
        },
        plotOptions: {
          pie: {
            innerSize: 0,
            depth: 40,
            dataLabels: {
              distance: 10,
              // useHTML: true,
              // enabled: true,
              color: '#2ffff3',
              fontSize: 30,
              borderWidth: 1,
              style: {
                fontSize: 18,
                fontFamily: 'AliHYAiHei',
                fontWeight: 500
              },
              format: '{key} <br/> {y}'
            }
          }
        },
        series: [
          {
            type: 'pie',
            name: '数量',
            colors: ['#72d4fe', '#fec33e'],
            data: []
          }
        ]
      },
      getData: (adcode: string) => {
        httpRequest
          .get({ url: 'M1JbqkRwfbzl', params: { adcode: adcode } })
          .then((res) => {
            let data: any[] = []
            pie3DState.subTitle = res.subTitle
            pie3DState.total = 0
            res.data.forEach((item: any) => {
              pie3DState.total += item.value
              let arr = [item.name, item.value]
              data.push(arr)
            })
            pie3DState.params.series[0].data = data
            pie3DState.chartsInstance && pie3DState.chartsInstance.destroy()
            Highcharts.setOptions({
              //数字显示成带千位符号的
              lang: {
                thousandsSep: ','
              }
            })
            pie3DState.chartsInstance = Highcharts.chart(
              highchartContainer.value as HTMLElement,
              pie3DState.params
            )
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    pie3DState.getData(props.adcode)
    const refreshData = () => {
      pie3DState.getData(props.adcode)
      pieState.getData(props.adcode)
    }
    onBeforeUnmount(() => {
      pie3DState.chartsInstance && pie3DState.chartsInstance.destroy()
    })
    watch(
      () => props.adcode,
      (val) => {
        pieState.getData(val)
        pie3DState.getData(props.adcode)
      }
    )
    return {
      pieState,
      pie3DState,
      highchartContainer,
      refreshData
    }
  }
})
</script>
<style lang="less" scoped>
.jbqk {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .top {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 60px;
      line-height: 40px;
      margin-top: 20px;
      .text {
        font-size: 24px;
        color: #fdd931;
        font-family: 'AliHYAiHei';
      }
    }
  }
  .bottom {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    .label {
      position: relative;
      width: 404px;
      flex: 0 0 90px;
      margin-top: 10px;
      background: url('../img/label-bg.png') no-repeat;
      .total-box {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        .name {
          position: relative;
          top: -10px;
          color: #fdd931;
          font-size: 18px;
          font-family: 'AliHYAiHei';
          margin-bottom: 10px;
        }
      }
      ul.list {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        li.item {
          flex: 0 0 120px;
          .name {
            font-size: 18px;
            color: #3bfc99;
            font-family: 'AliHYAiHei';
            text-align: center;
            margin: 10px 0 6px 0;
          }
        }
      }
    }
    .chart {
      flex: 1;
    }
  }
  .number {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .unit-orange {
      font-size: 24px;
      color: #ffa811;
      font-family: 'AliHYAiHei';
    }
    .unit-cyan {
      font-size: 24px;
      color: #3bfc99;
      font-family: 'AliHYAiHei';
    }
  }
}
</style>
